ul {
  list-style: none;
}

.collapsible-wrapper {
  display: flex;
  overflow: hidden;
  padding-left: 20px;
}

.collapsible-wrapper:after {
  content: '';
  height: 40px;
  transition: height 0.3s linear, max-height 0s 0.3s linear;
  max-height: 0px;
}

.collapsible {
  transition: margin-bottom 0.3s cubic-bezier(0, 0, 0, 1);
  margin-bottom: 0;
  width: 100%;
  max-height: 1000000px;
}

.collapsible-wrapper.collapsed>.collapsible {
  margin-bottom: -2000px;
  transition: margin-bottom 0.3s cubic-bezier(1, 0, 1, 1), visibility 0s 0.3s, max-height 0s 0.3s;
  visibility: hidden;
  max-height: 0;
}

.collapsible-wrapper.collapsed:after {
  height: 0;
  transition: height 0.3s linear;
  max-height: 40px;
}

.tree-item {
  display: flex;
  align-items: center;
  // background: #ddd;
  margin: 0;
  padding: 8px 0;
  line-height: 1.3;
  width: 100%;
  height: 42px;
  // border: 1px solid #eee;
  cursor: pointer;
}

.collapsible .tree-item {
  // border-left: 2px solid #888;
  // border-right: 2px solid #888;
  // background: #eee;
}

// .tree-item.toggler {
//   cursor: pointer;
// }
// .tree-item.toggler:before {
//   content: '';
//   display: block;
//   border-left: 8px solid white;
//   border-top: 8px solid transparent;
//   border-bottom: 8px solid transparent;
//   width: 0;
//   height: 0;
//   float: right;
//   transition: transform 0.3s ease-out;
// }
// .tree-item.toggler.toggled:before {
//   transform: rotate(90deg);
// }
.toggler {
  transition: transform 0.3s ease-out;
}

.toggler.toggled {
  transform: rotate(90deg);
}
